<div class="card">
  <div class="card-header">
    Quality Control
  </div>
  <div class="card-body">
    <div class="progress">
      <div class="progress-bar bg-success" style="width:{{job.samplesOk * 100.0 / job.samples}}%">
      </div>
      <div class="progress-bar bg-warning" style="width:{{job.samplesWarning * 100.0 / job.samples}}%">
      </div>
      <div class="progress-bar bg-danger" style="width:{{job.samplesError * 100.0 / job.samples}}%">
      </div>
    </div>
    <div style="margin-top: 15px;">
      <i class="fas fa-check-circle text-success"></i> Passed: {{job.samplesOk}}&nbsp;&nbsp;
      <i class="fas fa-exclamation-triangle text-warning"></i> Warnings: {{job.samplesWarning}}&nbsp;&nbsp;
      <i class="fas fa-exclamation-circle text-danger"></i> Failed: {{job.samplesError}}
    </div>
    <div style="margin-top: 15px;">
      <table class="table table-sm">
        <tbody>
      {{for counter in job.getCounters()}}
      <tr class="small {{if counter.getType().toString() == "WARNING"}}font-weight-bold{{end}}">
        <td>
          {{if counter.getType().toString() == "WARNING"}}
            <i class="fas fa-exclamation-triangle text-warning"></i>&nbsp;
          {{end}}
          {{counter.getLabel()}}
        </td>
        <td>{{counter.getValue()}}</td>
      </tr>
      {{end}}
      </tbody>
      </table>
    </div>
  </div>
</div>
